<template>
  <div>
    <el-breadcrumb>
      <el-breadcrumb-item>员工管理</el-breadcrumb-item>
      <el-breadcrumb-item>数据列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form
        :inline="true"
        :model="queryForm"
        size="small"
        style="margin-top: 20px"
        class="demo-form-inline"
    >
      <el-form-item label="手机号">
        <el-input
            v-model="queryForm.tel"
            placeholder="请输入手机号"
            style="width: 100px"
        />
      </el-form-item>

      <el-form-item label="姓名">
        <el-input
            v-model="queryForm.gmName"
            placeholder="请输入名字"
            style="width: 100px"
        />
      </el-form-item>

      <el-form-item label="省份ID">
        <el-input
            v-model="queryForm.provinceId"
            placeholder="请输入省份ID"
            style="width: 100px"
        />
      </el-form-item>

      <el-form-item label="城市ID">
        <el-input
            v-model="queryForm.cityId"
            placeholder="请输入城市ID"
            style="width: 100px"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="danger" @click="clear">清空</el-button>
        <el-button type="primary" @click="query">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table
        :data="pageResponseDto.list"
        style="width: 100%"
        :cell-style="{ padding: '4px' }"
        empty-text="无数据"
    >
      <el-table-column prop="gmId" label="员工ID" width="100" />
      <el-table-column prop="tel" label="手机号" width="150" />
      <el-table-column prop="gmName" label="姓名" />
      <el-table-column prop="password" label="密码" />
      <el-table-column prop="provinceId" label="省份ID" />
      <el-table-column prop="cityId" label="城市ID" />
      <el-table-column prop="remarks" label="备注" />

      <el-table-column label="操作" width="120">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="updateMember(scope.row.gmId)">
            <el-icon title="更新员工" style="font-size: 18px">
              <Edit/>
            </el-icon>
          </el-button>
          <el-button link type="primary" size="small" @click="addRemarks(scope.row.gmId)">
            <el-icon title="评价员工" style="font-size: 18px">
              <Star/>
            </el-icon>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
          background
          small
          layout="prev, pager, next, total"
          :total="pageResponseDto.totalRow"
          :page-size="pageResponseDto.maxPageNum"
          stylemargin="-top: 20px"
          v-model:current-page="pageNum"
      />
    </div>
  </div>
</template>

<script setup>
import { Star, Edit } from "@element-plus/icons-vue";
import { reactive, ref, inject, watch } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";

const store = useStore();
const router = useRouter();
const axios = inject("axios");

const queryForm = reactive({
  tel: null,
  gmName: null,
  provinceId: null,
  cityId: null,
});
const pageResponseDto = ref({});
const pageNum = ref(1);

const listGridMembers = (pageNum) => {
  let param = {
    tel: queryForm.tel,
    gmName: queryForm.gmName,
    provinceId: queryForm.provinceId,
    cityId: queryForm.cityId,
    pageNum: pageNum,
    pageSize: store.state.pageSize,
  };
  axios
      .post("gridMember/listGridMembers", param)
      .then((response) => {
        pageResponseDto.value = response.data;
      })
      .catch((error) => {
        console.error("Error:", error);
      });
};

watch(pageNum, (newValue) => {
  listGridMembers(newValue);
});

const init = () => {
  listGridMembers(1);
};
init();

const clear = () => {
  queryForm.tel = null;
  queryForm.gmName = null;
  queryForm.provinceId = null;
  queryForm.cityId = null;
};

const query = () => {
  listGridMembers(1);
};

const updateMember = (gmId) => {
  router.push({path: "/index/gridMemberUpdate", query: {gmId: gmId}});
};

const addRemarks = (gmId) => {
  router.push({path: "/index/gridMemberRemarks", query: {gmId: gmId}});
};
</script>

<style scoped>
.pagination {
  display: flex;
  justify-content: center;
}
</style>